<template>
	<view v-show="pageShow">
		<search ref="search" @search="handleSearch" />
		<view v-if="!!list.length">
			<view class="statistic-content">
				<view class="statistic-item">
					<label>总托盘数</label>
					<text>{{totalPalletNum}}</text>
				</view>
				<view class="statistic-item">
					<label>总库存数</label>
					<text>{{totalStockNum}}</text>
				</view>
			</view>
			<view class="list-card">
				<uni-card v-for="item in list" :key="item.goodsId" :title="'货品代码：' + item.goodsCode">
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>货品规格：</label>
							<text>{{item.goodsSpecifications || '-'}}</text>
						</view>
						<view class="item-content">
							<label>货主名称：</label>
							<text>{{item.ownerName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>库存数量：</label>
							<text>{{parseInt(item.quantity || 0)}}</text>
						</view>
						<view class="item-content">
							<label>可用数量：</label>
							<text>{{parseInt(item.usableQuantity || 0)}}</text>
						</view>
					</view>
				</uni-card>
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</view>
		</view>
		<no-data :visible="!list.length" title="暂无数据" :fullscreen="true"></no-data>
	</view>
</template>

<script>
	import search from './search.vue';
	import uniCard from '@/components/uni-card/uni-card.vue';
	import loadMore from '@/components/uni-load-more/uni-load-more.vue';
	import noData from '@/components/no-data/no-data.vue';

	export default {
		components: {
			search,
			uniCard,
			loadMore,
			noData
		},
		data() {
			return {
				pageShow: false,
				params: {
					limit: global.$limit,
					page: 1,
					warehouseId: this.$storage.getWarehouseId()
				},
				list: [],
				loadMoreStatus: global.$loadMoreStatus.more
			}
		},
		computed: {
			totalPalletNum() {
				if (!this.list.length) return 0;
				return this.list.filter(v => !!v.palletCode).length;
			},
			totalStockNum() {
				if (!this.list.length) return 0;
				return this.list.filter(v => !!v.quantity).map(v => parseInt(v.quantity || 0)).reduce((m, n) => m + n);
			}
		},
		onLoad() {
			this.load();
		},
		onNavigationBarButtonTap() {
			this.$refs.search.open(Object.assign({}, this.params));
		},
		onPullDownRefresh() {
			this.params.page = 1;
			this.fetch();
		},
		onReachBottom() {
			if (this.loadMoreStatus === global.$loadMoreStatus.more) {
				this.loadMoreStatus = global.$loadMoreStatus.loading;
				this.params.page++;
				this.fetch();
			}
		},
		methods: {
			load() {
				uni.showLoading({
					title: '加载中'
				});
				this.fetch();
			},
			handleSearch(param) {
				this.params = Object.assign({}, {
					limit: global.$limit,
					page: 1,
					warehouseId: this.$storage.getWarehouseId()
				}, param);
				this.load();
			},
			fetch() {
				this.$api.stock.list(this.params).then(res => {
					this.params.page === 1 && uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					this.list = this.params.page === 1 ? [...res.data] : [...this.list, ...res.data];
					this.loadMoreStatus = this.$pageHelper.lastPage(this.params.limit, this.params.page, res.count) ?
						global.$loadMoreStatus.noMore : global.$loadMoreStatus.more;
					this.pageShow = true;
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}, () => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statistic-content {
		position: fixed;
		background-color: #EEF4FA;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		width: 100%;
		margin-left: -20rpx;
		display: flex;
		top: 0;
		z-index: 2;

		.statistic-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.statistic-item label {
			color: #8E8E8E;
		}

		.statistic-item text {
			color: #007AFF;
		}
	}

	.list-card {
		margin-top: 120rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}

	.uni-load-more {
		margin-top: -30rpx;
	}
</style>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
